<!--
 * @Author: xuhanghai 2421880682@qq.com
 * @Date: 2024-12-10 10:49:11
 * @LastEditors: chenhuanhuan 2925102113@qq.com
 * @LastEditTime: 2025-02-13 16:24:52
 * @FilePath: \hbzc-groupmeal-center-web\src\Public-UIlibrary\pb-input\index.vue
-->
<template>
  <div>
    <el-input v-model="internalValue" :maxlength="maxlength" :minlength="minlength" :max="max" :min="min" :type="type"
      :class="type == 'number' ? 'del-arrow' : ''" clearable :disabled="disabled" :style="{ width: `${width}` }"
      :placeholder="placeholder" @change="changeFn" @blur="blurFn" :show-word-limit="showwordlimit"
      :autosize="autosize">
      <template v-if="appendtitle != ''" #append>{{ appendtitle }}</template>
    </el-input>
  </div>
</template>
<script setup lang="ts">
import { ref, defineProps, defineEmits } from "vue";
/**
 * @param width    宽度
 * @param modelValue    值
 * @param disabled    是否禁用
 * @param minlength 最小长度
 * @param maxlength 最大长度

 */
const props = defineProps({
  width: {
    type: String,
    default: "240px",
  },
  maxlength: {
    type: Number,
    default: 30,
  },
  minlength: {
    type: Number,
  },
  max: {
    type: Number,
  },
  min: {
    type: Number,
  },
  type: {
    type: String,
  },
  modelValue: {
    type: String,
    default: "",
  },
  disabled: {
    type: Boolean,
    default: false,
  },
  placeholder: {
    type: String,
    default: "请输入",
  },
  appendtitle: {
    type: String,
    default: "",
  },
  showwordlimit: {
    type: Boolean,
    default: false,
  },
  autosize: {
    type: Object,
    default: {
    }
  }
});

const emits = defineEmits(["update:modelValue", "change", "blur"]);
let internalValue = computed({
  get() {
    return props.modelValue;
  },
  set(val) {
    emits("update:modelValue", val);
  },
});

const changeFn = () => {
  emits("change", internalValue.value);
};

const blurFn = () => {
  emits("blur", internalValue.value);
};
</script>

<style lang="scss" scoped>
::v-deep .el-input__wrapper {
  height: 36px !important;
  padding: 1px 16px !important;
}

::v-deep .del-arrow input::-webkit-outer-spin-button,
::v-deep .del-arrow input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
}

::v-deep .del-arrow input[type="number"] {
  -moz-appearance: textfield;
}
</style>
